import * as React from 'react'
import { getClassName } from '../utils'

interface IProps {
    className?: string
    value: string | number
    color?: string
    integerSize?: string | number
    decimalSize?: string | number
}

export default class Price extends React.Component<IProps, any> {
    
    public state = {
        integerSize: 16,
        decimalSize: 12
    }

    public render(): JSX.Element {
        const { className, value, color, integerSize, decimalSize } = this.props
        let val: any = value.toString()
        val = val.split('.')
        const styles: React.CSSProperties = { color }
        const integer: React.CSSProperties = { fontSize: integerSize }
        const decimal: React.CSSProperties = { fontSize: decimalSize }
        return (
            <span className={getClassName('price', className)} style={styles}>
                <span style={integer}>{val[0]}.</span>
                <span style={decimal}>{val[1]}</span>
            </span>
        )
    }
}